<template>
    <div class="full-screen" id="full-screen">
        <div class='container'>
            <span class="error-num">5</span>
            <div class='eye'></div>
            <div class='eye'></div>
            <p class="sub-text">Oh eyeballs! Something went wrong. We're <span class="italic">looking</span> to see what happened.</p>
            <a href="/index">Go back</a>
        </div>
    </div>
</template>

<script>
import watermark from '@assets/js/util/watermark';

export default {
    created() {
        watermark.deleteWatermark();
    },
    mounted() {
        this.bindEvents();
    },
    methods: {
        /* 事件绑定*/
        bindEvents() {
            document.getElementById('full-screen').addEventListener('mousemove', (event) => {
                const eye = $('.eye');
                const x = eye.offset().left + eye.width() / 2;
                const y = eye.offset().top + eye.height() / 2;
                const rad = Math.atan2(event.pageX - x, event.pageY - y);
                const rot = rad * (180 / Math.PI) * -1 + 180;
                eye.css({
                    '-webkit-transform': 'rotate(' + rot + 'deg)',
                    '-moz-transform': 'rotate(' + rot + 'deg)',
                    '-ms-transform': 'rotate(' + rot + 'deg)',
                    'transform': 'rotate(' + rot + 'deg)',
                });
            });
        },
    },
};
</script>

<style scoped lang="scss">
    .full-screen {
        background-color: rgb(30, 34, 45);
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        color: white;
        text-align: center;
    }

    .container {
        padding-top: 10em;
        width: 50%;
        display: block;
        margin: 0 auto;
    }

    .error-num {
        font-size: 8em;
    }

    .eye {
        background: #fff;
        border-radius: 50%;
        display: inline-block;
        height: 100px;
        position: relative;
        width: 100px;

        &::after {
            background: #000;
            border-radius: 50%;
            bottom: 56.1px;
            content: ' ';
            height: 33px;
            position: absolute;
            right: 33px;
            width: 33px;
        }
    }

    .italic {
        font-style: italic;
    }

    p {
        margin-bottom: 4em;
    }

    a {
        color: white;
        text-decoration: none;
        text-transform: uppercase;

        &:hover {
            color: lightgray;
        }
    }
</style>
